<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单的大屏缩放原理</title>
</head>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 500px;

    border: 1px solid red;
    box-sizing: border-box;

    background-color: aqua;
    overflow: hidden;
    transform-origin: left top;
    transform: scale(1) translate(-50%, -50%);
  }
</style>

<body>
  <div id="main">1200px * 500px</div>

  <script>

    function resizeHandle () {
      // 设计稿尺寸 px
      const baseWidth = 1200, baseHeight = 500
      // 默认屏幕 宽高比
      const baseRate = parseFloat((baseWidth / baseHeight).toFixed(5))
      // 当前屏幕 宽高比
      const currRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      // 缩放比例
      let scaleRate = 1
      if (currRate > baseRate) {
        // 表示更宽
        scaleRate = (window.innerHeight / baseHeight).toFixed(5)
      } else {
        // 表示更高
        scaleRate = (window.innerWidth / baseWidth).toFixed(5)
      }
      document.querySelector('#main').style.transform = `scale(${scaleRate}) translate(-50%, -50%)`
    }
    resizeHandle()
    window.addEventListener('resize', resizeHandle);
  </script>

</body>

</html>